<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>黑名单</title>
  <script src="../../../static/kaige/js/szload.js"></script>
  <style>
    .layui-form-item .layui-input-inline {
      min-width: 200px;
    }
  </style>
</head>

<body>
  <div class="kaige-body">
    <table class="layui-table" id="pageTable" lay-filter="pageTable" lay-size="sm"></table>
    <input type="hidden" name="keywordsCache" value="{}" />
  </div>

  <script>
    load_init_js(function () {
      layui.config({
        base: szoapcpath + '/static/kaige/layuiextend/'
      }).use(['element', 'table', 'form', 'layer', 'kaige','laydate'], function (element,table,form,layer,kaige,laydate) {
        var $ = layui.$;
        form.render();

        kaige.table({
          elem: '#pageTable',
          url: "/sys.black/index",
          id: 'pageTable',
          toolbar: '#dtoolbar',
          defaultToolbar: ['filter'],
          cols: [[
            { field: 'id', title: 'ID', align: 'center', hide: true, width: 90 },
            { field: 'real_name', title: '姓名', align: 'center', width: 120 },
            { field: 'un', title: '账户', align: 'center', width: 120 },
            {
              field: 'is_multidevice', title: '允许多设备', align: 'center', width: 100, templet: function (d) {
                return  (d.is_multidevice==1?'<span class="layui-badge layui-bg-blue">是</span>' : '<span class="layui-badge">否</span>');
              }
            },
            { field: 'black_ip', title: '黑名单IP', align: 'center', width: 200 },
            { field: 'out_time', title: '过期时间', align: 'center', width: 180 },
            {
              field: 'is_kickout', title: '是否踢出', align: 'center', width: 100, templet: function (d) {
                return  (d.is_kickout==1?'<span class="layui-badge">是</span>' : '<span class="layui-badge layui-bg-blue">否</span>');
              }
            },
            { field: 'handle_name', title: '操作人', align: 'center', width: 100 },
            { field: 'last_ip', title: '最后登录IP', align: 'center', width: 180 },
            { field: 'last_time', title: '最后登录时间', align: 'center', width: 180 },
            { field: 'create_time', title: '创建时间', align: 'center', width: 180, hide: true },
            { field: 'update_time', title: '更新时间', align: 'center', width: 180, hide: true },
            { title: '操作', toolbar: '#dtrbar', align: 'center', width: 150, fixed: 'right' }
          ]]
        });

        //列表-监听表头工具栏事件dtoolbar
        table.on('toolbar(pageTable)', function (obj) {
          switch (obj.event) {
            case 'btn-add':
              btnadd();
              break;
          }
        });

        //列表-监听单元格行工具事件dtrbar
        table.on('tool(pageTable)', function (obj) {
          var that = this;
          var data = obj.data;
          switch (obj.event) {
            case 'edit':
              baredit(data);
              break;
            case 'del':
              bardel(data);
              break;
          }
        });

        function addedit() {
          //用户
          kaige.xmSelect({
            id: 'user_id',
            url: '/select/employee',
            udata: { automatch: 1 },
            radio: true,
            clickClose: true
          });
          laydate.render({
            elem: '#out_time'
            , type: 'datetime'
          });
        }

        //添加
        function btnadd() {
          kaige.form({
            url: "/sys.black/add",
            data: {},
            id: 'kaige',
            area: ['800px', '450px'],
            title: '<i class="layui-icon layui-icon-add-circle"></i> 添加 - 黑名单',
            tablelayid: 'pageTable',
            overflow: true,
            resize: false,
            encode: 1,
            callbefore: function (layero, index) {
              addedit()
            }
          });
        }

        //编辑
        function baredit(d) {
          kaige.form({
            url: "/sys.black/edit",
            data: { id: d.id },
            id: 'kaige',
            area: ['800px', '450px'],
            title: '<i class="layui-icon layui-icon-edit"></i> 编辑 - 黑名单',
            tablelayid: 'pageTable',
            overflow: true,
            resize: false,
            encode: 1,
            callbefore: function (layero, index) {
              addedit()
            },
          });
        }

        //删除
        function bardel(d) {
          layer.confirm('您确定删除吗？', {
            title: '<i class="layui-icon layui-icon-delete"></i> 删除确认',
            btn: ['确认', '取消']
          }, function () {
            $.post("/sys.black/del", { id: d.id }, function (res) {
              res.status && table.reload('pageTable');
              layer.msg(res.msg);
            });
          });
        };

      });
    });
  </script>
  <script type="text/html" id="dtrbar">
        <div class="layui-btn-group">
            <button class="layui-btn layui-btn-xs" lay-event="edit" title="编辑"><i class="layui-icon layui-icon-edit"></i></button>
            <button class="layui-btn layui-btn-xs" lay-event="del" title="删除"><i class="layui-icon layui-icon-delete"></i></button>
        </div>
      </script>
  <script type="text/html" id="dtoolbar">
        <div class="layui-btn-container layui-form filter-form" lay-filter="searchform">
            <div class="layui-btn-group">
                <button type="button" class="layui-btn layui-btn-sm" lay-event="btn-add" style="margin-top:2px;"><i class="layui-icon layui-icon-add-circle"></i> 添加</button>
            </div>
        </div>
      </script>
  <script type="text/html" id="kaige_form_html">
        <form class="layui-form layui-form-pane kaige-body-form" style="padding: 5px;" lay-filter="kaige_form_lay_filter">
          {{# if(d.id){ }}
          <input type="hidden" name="id" value="{{ d.id }}" />
          {{# } }}
          <blockquote class="layui-elem-quote layui-text">
            黑名单IP：多个IP以逗号隔开<br/>
            是否踢出：如果选择踢出，过期时间方生效,过期时间指的是踢出到 此时间点之前的所有登录
          </blockquote>
          <div class="layui-form-item">
            <label class="layui-form-label">用户</label>
            <div class="layui-input-inline">
              <div id="user_id_select_box"></div>
              <input type="hidden" id="user_id_name"/>
              <input type="hidden" id="user_id" value="{{ d.uid || '' }}" name="uid" />
            </div>
            <label class="layui-form-label">多设备</label>
            <div class="layui-input-inline">
              <input type="radio" name="is_multidevice" value="1" title="允许" {{ d.is_multidevice==1 ? "checked":"" }}>
              <input type="radio" name="is_multidevice" value="2" title="不允许" {{ d.is_multidevice==2 ? "checked":"" }}>
            </div>
          </div>          
          <div class="layui-form-item">
            <label class="layui-form-label">黑名单IP</label>
            <div class="layui-input-block">
              <textarea  name="black_ip"  class="layui-textarea" placeholder="0.0.0.0,1.1.1.1 ...">{{ d.black_ip || '' }}</textarea>
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">过期时间</label>
            <div class="layui-input-inline">
              <input name="out_time" id="out_time" value="{{ d.out_time || '' }}" class="layui-input" type="text">
            </div>
            <label class="layui-form-label">是否踢出</label>
            <div class="layui-input-inline">
              <input type="radio" name="is_kickout" value="1" title="踢出" {{ d.is_kickout==1 ? "checked":"" }}>
              <input type="radio" name="is_kickout" value="2" title="不踢" {{ d.is_kickout==2 ? "checked":"" }}>
            </div>
          </div>          
          <div class="layui-form-item layui-hide">
            <button class="layui-hide" lay-submit="" id="kaige_form_btn_save" lay-filter="kaige_form_btn_save">保存数据</button>
          </div>
        </form>
      </script>
</body>

</html>